<template>
  <div class="home">
    <!-- 按钮集合 -->
    <section class="buttons">
      <div>
        <el-button type="success" style="margin-left: 10px" @click="dialogFormVisible = true">
          <i class="el-icon-s-claim el-icon--left" />保存
        </el-button>
        <el-button type="danger" style="margin-left: 10px" @click="Previous">返回</el-button>
        <!-- <el-button @click="reloads">重置</el-button> -->
        <el-button @click="catJson">查看JSON </el-button>
        <el-button @click="$refs.file.click()">导入JSON </el-button>
        <el-button @click="exportJSON">导出JSON </el-button>
        <input id="file" ref="file" type="file" accept=".json" style="display: none" @change="importJSON" />
      </div>
    </section>
    
    <!-- 装修操作 -->
    <section class="operation">
      <!-- 组件 -->
      <sliderassembly :pointer="pointer" :type="pagetype" />

      <!-- 手机 -->
      <div class="phone">
        <section id="imageTofile" ref="imageTofile" class="phoneAll">
          <!-- 导航栏 -->
          <img src="@/assets/images/phoneTop.png" alt="" class="statusBar" />
          <!-- 标题 -->
          <div class="headerTop" :style="{ height: pageSetup.titleHeight + 'px' }" @click="headTop">
            <!-- 标题 -->
            <div
              class="header-title"
              :style="{ height: pageSetup.titleHeight + 'px', 'line-height': pageSetup.titleHeight + 'px' }">
              {{ pageSetup.pname }}
            </div>
            <!-- 右半部分 -->
            <div v-show="pageSetup.isPerson" class="rig">
              <span>个人中心</span>
            </div>
          </div>
          <!-- 主体内容 -->
          <section
            class="phone-container"
            :style="{'background-color': pageSetup.bgColor, backgroundImage: 'url(' + pageSetup.bgImg + ')',}"
            @drop="drop($event)"
            @dragover="allowDrop($event, 'asf')"
            @dragleave="dragleaves($event)">
            <div :class="pointer.show ? 'pointer-events' : ''">
              <!-- 动态组件 -->
              <component
                :is="item.component"
                v-for="(item, index) in pageComponents"
                :key="index"
                :datas="item.setStyle"
                :style="{ border: item.active ? '1px solid #00a0e9' : '', }"
                class="componentsClass"
                :data-type="item.type"
                @click.native="activeComponent(item, index)">
                <div v-show="item.active" slot="deles" class="deles">
                  <!-- 删除组件 -->
                  <!-- <span class="iconfont icon-sanjiaoxingzuo" />
                  {{ item.text }}
                  <i class="el-icon-delete-solid" /> -->
                  <OperationBtns @click-oprta="clickOpera"></OperationBtns>
                </div>
              </component>
            </div>
          </section>
          <!-- 手机高度 -->
          <div class="phoneSize">iPhone 8手机高度</div>
          <!-- 底部 -->
          <phoneBottom :datas="pageSetup.bottomLogo" />
        </section>
      </div>

      <!-- 页面设置tab -->
      <div class="decorateTab">
        <span :class="rightcom === 'decorate' ? 'active' : ''" @click="rightcom = 'decorate'">
          <i class="iconfont icon-wangye" />页面设置
        </span>
        <span :class="rightcom === 'componenmanagement' ? 'active' : ''" @click="rightcom = 'componenmanagement'">
          <i class="iconfont icon-zujian" />组件管理
        </span>
        <span v-show="rightcom !== 'componenmanagement' && rightcom !== 'decorate'" class="active">
          <i class="iconfont icon-zujian" />组件设置
        </span>
      </div>

      <!-- 右侧工具栏 -->
      <div class="decorateAll">
        <!-- 页面设置 -->
        <transition name="decorateAnima">
          <!-- 路由缓存 -->
          <keep-alive exclude="richtextstyle">
            <!-- 动态组件 -->
            <component :is="rightcom" :datas="currentproperties" @componenmanagement="componenmanagement" />
          </keep-alive>
        </transition>
      </div>
    </section>

    <!-- 提示框 -->
    <el-dialog title="温馨提醒" :visible.sync="dialogFormVisible" :close-on-click-modal="false" center width="30%">
      <el-form :model="pageformdata" :rules="rules" ref="customFrom">
        <el-form-item label="请输入页面备注信息，再保存页面">
          <el-input ondragenter="return false" v-model="pageformdata.note" autocomplete="off" placeholder="备注"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="savePageJson">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import utils from "@/utils/index"; // 方法
import componentProperties from "@/utils/componentProperties"; // 组件数据
import sliderassembly from "@/components/sliderassembly"; // 左侧组件大全
import phoneBottom from "@/components/phoneBottom"; // 手机底部
import html2canvas from "html2canvas"; // 生成图片
import FileSaver from "file-saver"; // 导入or导出JSON
import Vue from "vue";
// 接口调用
import { saveDecoratePages, getPageCustomDetail } from "@/api/basisMG";
import OperationBtns from './components/operationBtns';
// 手机组件
import { install } from "@/components/componentscom/lib";
// 右侧组件
import { installStyles } from "@/components/rightslider/lib";
import { decorate, componenmanagement } from "@/components/rightslider";
import { placementarea } from "@/components/componentscom";
export default {
  components: {
    decorate,
    componenmanagement,
    phoneBottom,
    sliderassembly,
    placementarea,
    OperationBtns,
    install,
    installStyles
  },
  data() {
    return {
      id: null,  // 当前页面
      index: "",  // 当前选中的index
      rightcom: "decorate", // 右侧组件切换
      currentproperties: {},  // 当前属性
      // 页面设置属性
      pageSetup: {
        pname: "页面名称",  // 页面名称
        details: "",  // 页面描述
        bgColor: "rgba(244, 244, 244, 1)", // 背景颜色
        // 底部logo
        bottomLogo: {
          isShowBootom: true,
          botLogo: "",
        },
        isPerson: false,  // 是否显示个人中心
        isBack: true,  // 是否返回按钮
        titleHeight: 35,
        bgImg: "",
        subjectCode: ""  // 学科编码
      },
      pageComponents: [],  // 页面组件
      offsetY: 0,  // 记录上一次距离父元素高度
      pointer: { show: false }, // 穿透
      onlyOne: ["1-21", "1-22"], // 只能存在一个的组件
      dialogFormVisible: false,
      pageformdata: {
        id: "",
        name: "",
        note: "",
        pageId: "",
        pageContent: "",
      },
      rules: {
        note: [{ required: true, message: "请填写备注", trigger: "blur" }],
      },
      detailformdata: {
        pageId: "",
        version: "",
      },
      pagetype: "",
      currentComponent: {}
    };
  },
  watch: {
    // 监听右侧属性设置切换
    rightcom(newval) {
      if (newval === "decorate") {
        utils.forEach(this.pageComponents, (res) => {
          // 修改选中
          // if (res.active === true) res.active = false;
        });
        this.currentproperties = this.pageSetup;
        return;
      }
      if (newval === "componenmanagement") {
        // 替换
        utils.forEach(this.pageComponents, (res) => {
          // 修改选中
          // if (res.active === true) res.active = false;
        });
        this.currentproperties = this.pageComponents;
      }
    },
  },
  mounted() {
    this.pageSetup.subjectCode = this.$route.query.subjectCode;
    this.currentproperties = this.pageSetup;
  },
  created() {
    install(Vue);
    installStyles(Vue);
    this.getPageCustomDetail();
    this.pagetype = this.$route.query.type;
    localStorage.setItem('apptype',JSON.stringify(this.$route.query.appType));
  },
  methods: {
    // 查看JSON
    catJson() {
      const JsonData = {
        id: this.id,
        pname: this.pageSetup.pname,
        templateJson: this.pageSetup,
        component: this.pageComponents,
      };
      this.$alert(
        `<textarea class="jsonArea">${this.formatJson(JSON.stringify(JsonData))}</textarea>`,
        "查看JSON",
        {
          confirmButtonText: "确定",
          customClass: "JSONView",
          dangerouslyUseHTMLString: true,
          callback: () => {},
        }
      );
    },
    /**
     * @description: 格式化JSON数据
     * @param {*} jsonObj
     * @Author: ckk
     * @Date: 2022-09-05 15:42:44
     * @return {*}
     */
    transitionJsonToString(jsonObj) {
      // 转换后的jsonObj受体对象
      // let _jsonObj: any = null; // ts写法
      let _jsonObj = null;
      // 判断传入的jsonObj对象是不是字符串，如果是字符串需要先转换为对象，再转换为字符串，这样做是为了保证转换后的字符串为双引号
      if (Object.prototype.toString.call(jsonObj) !== "[object String]") {
        try {
          _jsonObj = JSON.stringify(jsonObj);
        } catch (error) {
          // 转换失败错误信息
          // callback(error);
        }
      } else {
        try {
          jsonObj = jsonObj.replace(/(\')/g, '"');
          _jsonObj = JSON.stringify(JSON.parse(jsonObj));
        } catch (error) {
          // 转换失败错误信息
          // callback(error);
        }
      }
      return _jsonObj;
    },
    /**
     * @description: 格式化json
     * @param {*} jsonObj
     * @Author: ckk
     * @Date: 2022-09-05 15:43:39
     * @return {*}
     */
    formatJson(jsonObj) {
      // 正则表达式匹配规则变量
      let reg = null;
      // 转换后的字符串变量
      let formatted = "";
      // 换行缩进位数
      let pad = 0;
      // 一个tab对应空格位数
      let PADDING = "\t";
      // json对象转换为字符串变量
      let jsonString = this.transitionJsonToString(jsonObj);
      if (!jsonString) {
        return jsonString;
      }
      // 存储需要特殊处理的字符串段
      let _index = [];
      // 存储需要特殊处理的“再数组中的开始位置变量索引
      let _indexStart = null;
      // 存储需要特殊处理的“再数组中的结束位置变量索引
      let _indexEnd = null;
      // 将jsonString字符串内容通过\r\n符分割成数组
      let jsonArray = [];
      // 正则匹配到{,}符号则在两边添加回车换行
      jsonString = jsonString.replace(/([\{\}])/g, "\r\n$1\r\n");
      // 正则匹配到[,]符号则在两边添加回车换行
      jsonString = jsonString.replace(/([\[\]])/g, "\r\n$1\r\n");
      // 正则匹配到,符号则在两边添加回车换行
      jsonString = jsonString.replace(/(\,)/g, "$1\r\n");
      // 正则匹配到要超过一行的换行需要改为一行
      jsonString = jsonString.replace(/(\r\n\r\n)/g, "\r\n");
      // 正则匹配到单独处于一行的,符号时需要去掉换行，将,置于同行
      jsonString = jsonString.replace(/\r\n\,/g, ",");
      // 特殊处理双引号中的内容
      jsonArray = jsonString.split("\r\n");
      jsonArray.forEach(function (node, index) {
        // 获取当前字符串段中"的数量
        let num = node.match(/\"/g) ? node.match(/\"/g).length : 0;
        // 判断num是否为奇数来确定是否需要特殊处理
        if (num % 2 && !_indexStart) {
          _indexStart = index;
        }
        if (num % 2 && _indexStart && _indexStart != index) {
          _indexEnd = index;
        }
        // 将需要特殊处理的字符串段的其实位置和结束位置信息存入，并对应重置开始时和结束变量
        if (_indexStart && _indexEnd) {
          _index.push({
            start: _indexStart,
            end: _indexEnd,
          });
          _indexStart = null;
          _indexEnd = null;
        }
      });
      // 开始处理双引号中的内容，将多余的"去除
      _index.reverse().forEach(function (item, index) {
        let newArray = jsonArray.slice(item.start, item.end + 1);
        jsonArray.splice(item.start, item.end + 1 - item.start, newArray.join(""));
      });
      // 将处理后的数组通过\r\n连接符重组为字符串
      jsonString = jsonArray.join("\r\n");
      // 将匹配到:后为回车换行加大括号替换为冒号加大括号
      jsonString = jsonString.replace(/\:\r\n\{/g, ":{");
      // 将匹配到:后为回车换行加中括号替换为冒号加中括号
      jsonString = jsonString.replace(/\:\r\n\[/g, ":[");
      // 将上述转换后的字符串再次以\r\n分割成数组
      jsonArray = jsonString.split("\r\n");
      // 将转换完成的字符串根据PADDING值来组合成最终的形态
      jsonArray.forEach(function (item, index) {
        let i = 0;
        // 表示缩进的位数，以tab作为计数单位
        let indent = 0;
        // 表示缩进的位数，以空格作为计数单位
        let padding = "";
        if (item.match(/\{$/) || item.match(/\[$/)) {
          // 匹配到以{和[结尾的时候indent加1
          indent += 1;
        } else if (
          item.match(/\}$/) ||
          item.match(/\]$/) ||
          item.match(/\},$/) ||
          item.match(/\],$/)
        ) {
          // 匹配到以}和]结尾的时候indent减1
          if (pad !== 0) {
            pad -= 1;
          }
        } else {
          indent = 0;
        }
        for (i = 0; i < pad; i++) {
          padding += PADDING;
        }
        formatted += padding + item + "\r\n";
        pad += indent;
      });
      // 返回的数据需要去除两边的空格和换行
      return formatted
        .trim()
        .replace(new RegExp("^\\" + "<br />" + "+|\\" + "<br />" + "+$", "g"), "");
    },
    // 页面截图
    toImage() {
      // 加载
      const loading = this.$loading({
        lock: true,
        text: "保存中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      const imageTofiles = document.querySelector("#imageTofile");
      // 截图
      html2canvas(this.$refs.imageTofile, {
        backgroundColor: null,
        height: imageTofiles.scrollHeight,
        width: imageTofiles.scrollWidth,
        useCORS: true,
      }).then((canvas) => {
        const url = canvas.toDataURL("image/png");
        const formData = new FormData();
        formData.append("base64File", url);
        loading.close();
      });
    },

    // 当将元素或文本选择拖动到有效放置目标（每几百毫秒）上时，会触发此事件 event event对象
    allowDrop(event, val) {
      console.log('val-------------', val);
      // 阻止浏览器的默认事件
      event.preventDefault();
      // 获取鼠标高度
      const eventoffset = event.offsetY;
      // 如果没有移动不触发事件减少损耗
      if (this.offsetY === eventoffset) return;
      else this.offsetY = eventoffset;
      // 获取组件
      const childrenObject = event.target.children[0];
      // 一个以上的组件计算
      if (this.pageComponents.length) {
        // 如果只有一个组件并且第一个是提示组件直接返回
        if (this.pageComponents.length === 1 && this.pageComponents[0].type === 0) {
          return;
        }
        // 如果鼠标的高度小于第一个的一半直接放到第一个
        if (eventoffset < childrenObject.children[0].clientHeight / 2) {
          // 如果第一个是提示组件直接返回
          if (this.pageComponents[0].type === 0) return;
          // 删除提示组件
          this.pageComponents = this.pageComponents.filter(
            (res) => res.component !== "placementarea"
          );
          // 最后面添加提示组件
          this.pageComponents.unshift({
            component: "placementarea",
            type: 0,
          });
          return;
        }
        // 记录距离父元素高度
        const childOff = childrenObject.offsetTop;
        // 鼠标在所有组件下面
        if (
          eventoffset > childrenObject.clientHeight ||
          childrenObject.lastChild.offsetTop - childOff + childrenObject.lastChild.clientHeight / 2 < eventoffset
        ) {
          // 最后一个组件是提示组件返回
          if (this.pageComponents[this.pageComponents.length - 1].type === 0) {
            return;
          }
          // 清除提示组件
          this.pageComponents = this.pageComponents.filter(
            (res) => res.component !== "placementarea"
          );
          // 最后一个不是提示组件添加
          this.pageComponents.push({
            component: "placementarea",
            type: 0,
          });
          return;
        }
        const childrens = childrenObject.children;
        // 在两个组件中间，插入
        for (let i = 0, l = childrens.length; i < l; i++) {
          const childoffset = childrens[i].offsetTop - childOff;
          if (childoffset + childrens[i].clientHeight / 2 > event.offsetY) {
            // 如果是提示组件直接返回
            if (this.pageComponents[i].type === 0) break;
            if (this.pageComponents[i - 1].type === 0) break;
            // 清除提示组件
            this.pageComponents = this.pageComponents.filter(
              (res) => res.component !== "placementarea"
            );
            this.pageComponents.splice(i, 0, {
              component: "placementarea",
              type: 0,
            });
            break;
          } else if (childoffset + childrens[i].clientHeight > event.offsetY) {
            if (this.pageComponents[i].type === 0) break;
            if (!this.pageComponents[i + 1] || this.pageComponents[i + 1].type === 0) {
              break;
            }
            this.pageComponents = this.pageComponents.filter(
              (res) => res.component !== "placementarea"
            );
            this.pageComponents.splice(i, 0, {
              component: "placementarea",
              type: 0,
            });
            break;
          }
        }
      } else {
        // 一个组件都没有直接push
        this.pageComponents.push({
          component: "placementarea",
          type: 0,
        });
      }
    },

    drop(event) {
      // 获取数据
      const data = utils.deepClone(componentProperties.get(event.dataTransfer.getData("componentName")));
      const someResult = this.pageComponents.some((item) => {
        return (this.onlyOne.includes(item.type) && item.type === event.dataTransfer.getData("Text"));
      });
      if (someResult) {
        this.$message.info("当前组件只能添加一个！");
        // 删除提示组件
        this.pageComponents = this.pageComponents.filter((res) => res.component !== "placementarea");
        return;
      }
      // 替换
      utils.forEach(this.pageComponents, (res, index) => {
        // 修改选中
        // if (res.active === true) res.active = false;
        // 替换提示
        this.index = index;
        if (res.component === "placementarea") {
          this.$set(this.pageComponents, index, data);
        }
        if (this.pageComponents.length === index + 1) {
          this.pageComponents = this.pageComponents.filter((res) => res.component !== "placementarea");
          this.currentComponent = this.pageComponents;
        }
      });
      // 切换组件
      this.rightcom = data.style;
      // 丢样式
      this.currentproperties = data.setStyle;
    },

    // 当拖动的元素或文本选择离开有效的放置目标时，会触发此事件 event event对象
    dragleaves() {
      // 删除提示组件
      this.pageComponents = this.pageComponents.filter((res) => res.component !== "placementarea");
    },

    // 切换组件位置 res 组件切换后返回的位置
    componenmanagement(res) {
      console.log('res------------', res);
      this.pageComponents = res;
    },

    // 选择组件 res 当前组件对象
    activeComponent(res, index) {
      this.index = index;
      this.currentComponent = res;
      // 切换组件
      this.rightcom = res.style;
      // 丢样式
      this.currentproperties = res.setStyle;
      // 替换
      this.pageComponents.forEach((item, ind) => {
        if (index === ind) {
          item.active = true;
        } else {
          item.active = false;
        }
        // 修改选中
        // if (item.active === true) res.active = true;
      });
      // 选中样式
      // res.active = true;
    },

    // 标题切换 res 当前组件对象
    headTop() {
      this.rightcom = "decorate";
      // 替换
      utils.forEach(this.pageComponents, (res) => {
        // 修改选中
        // if (res.active === true) res.active = false;
      });
    },

    // 组件操作
    clickOpera (id) {
      switch (id) {
        case 'prevCom':
          this.prevComobj(this.index);
          break;
        case 'nextCom':
          this.nextComobj(this.index);
          break;
        case 'copyCom':
          this.copyObj(this.currentComponent,this.index);
          break;
        case 'deleteCom':
          this.deleteObj(this.index);
          break;
      }
    },
    // 上一层
    prevComobj(index) {
      if ((index - 1) < 0) {
        this.$message.info("当前已经是第一个了！");
      } else {
        [this.pageComponents[index - 1], this.pageComponents[index]] = [this.pageComponents[index], this.pageComponents[index - 1]]
      }
    },
    // 下一层
    nextComobj(index) {
      if (this.pageComponents.length === (index + 1)) {
        this.$message.info("当前已经是最后一个了！");
      } else {
        [this.pageComponents[index], this.pageComponents[index + 1]] = [this.pageComponents[index + 1], this.pageComponents[index]]
      }
    },
    // 复制组件
    copyObj(value,index) {
      let newCopyComponents = [];
      if (this.pageComponents.length === 1) {
        newCopyComponents = this.pageComponents.concat(JSON.parse(JSON.stringify(value)));
        newCopyComponents[index].active = false;
        this.pageComponents = newCopyComponents;
      } else {
        this.pageComponents[index].active = false;
        this.pageComponents.splice(index + 1, 0, JSON.parse(JSON.stringify(value)));
      }
    },
    // 删除组件
    deleteObj(index) {
      this.pageComponents.splice(index, 1);
      if (this.index === index) this.rightcom = "decorate";
      if (index < this.index) this.index = this.index - 1;
    },

    // 页面刷新
    reloads() {
      this.$confirm("重置后您添加或者修改的数据将会失效, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // this.$router.push({ path: "pagecustom" });
          this.reload();
        })
        .catch(() => {});
    },

    // 返回上一步
    Previous() {
      this.$confirm("返回列表您添加或者修改的数据将会失效, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // this.$router.go(-1);
          this.$router.push({
            path: './pageList',
            query: {
              protype: this.$route.query.appType
            }
          })
        })
        .catch(() => {});
    },

    //保存页面装修
    savePageJson() {
      // var idarr1 = JSON.parse(sessionStorage.getItem("hasCheckedIds"));
      // var idarr2 = JSON.parse(sessionStorage.getItem("checkedIds"));
      // var c = idarr1.concat(idarr2);
      this.pageformdata.pageId = this.$route.query.id;
      this.pageSetup.subjectCode = this.$route.query.subjectCode;
      this.pageformdata.pageContent = JSON.stringify({
        templateJson: JSON.stringify(this.pageSetup),
        component: JSON.stringify(this.pageComponents),
      });
      this.$refs["customFrom"].validate(async (valid) => {
        if (valid) {
          const data = await saveDecoratePages(this.pageformdata);
          if (data.code != 200) return this.$message.error(data.message);
          this.$message.success(data.message);
          this.dialogFormVisible = false;
          // this.$router.go(-1);
          this.$router.push({
            path: './pageList',
            query: {
              protype: this.$route.query.appType
            }
          })
        } else {
          this.$message.warning("提交失败!!!");
          return false;
        }
      });
    },

    //获取页面装修详情
    async getPageCustomDetail() {
      this.detailformdata.pageId = this.$route.query.id;
      const res = await getPageCustomDetail(this.detailformdata);
      const _this = this;
      if (res.data) {
        const templateJson = JSON.parse(JSON.parse(res.data.pageContent).templateJson);
        _this.pageComponents = JSON.parse(JSON.parse(res.data.pageContent).component);
        _this.pageformdata.id = res.data.id;
        _this.pageformdata.note = res.data.note;
        _this.pageSetup.pname = templateJson.pname;
        _this.pageSetup.details = templateJson.details;
        _this.pageSetup.bgColor = templateJson.bgColor;
        _this.pageSetup.titleHeight = templateJson.titleHeight;
        _this.pageSetup.isPerson = templateJson.isPerson;
        _this.pageSetup.isBack = templateJson.isBack;
      }
    },

    // 导出json
    exportJSON() {
      // 将json转换成字符串
      const data = JSON.stringify({
        id: this.id,
        pname: this.pageSetup.pname,
        templateJson: JSON.stringify(this.pageSetup),
        component: JSON.stringify(this.pageComponents),
      });
      const blob = new Blob([data], { type: "" });
      FileSaver.saveAs(blob, `${this.pageSetup.pname}.json`);
    },

    // 导入json
    importJSON() {
      const file = document.getElementById("file").files[0];
      const reader = new FileReader();
      reader.readAsText(file);
      const _this = this;
      reader.onload = function () {
        // this.result为读取到的json字符串，需转成json对象
        const ImportJSON = JSON.parse(this.result);
        // 检测是否导入成功
        // 导入JSON数据
        _this.id = ImportJSON.id;
        _this.pageSetup = JSON.parse(ImportJSON.templateJson);
        _this.pageComponents = JSON.parse(ImportJSON.component);
      };
    }
  }
};
</script>
<style>
.jsonArea {
  width: 100%;
  height: 850px;
  overflow-y: auto;
  border: none;
  resize: none;
}
.JSONView {
  width: 80% !important;
  height: 1000px;
  /* overflow-y: scroll; */
}
</style>
<style lang="scss" scoped>
.pointer-events {
  pointer-events: none;
}

.home {
  width: 100%;
  height: 100%;

  /* 删除组件 */
  // .deles {
  //   position: absolute;
  //   min-width: 80px;
  //   text-align: center;
  //   line-height: 25px;
  //   background: #fff;
  //   height: 25px;
  //   font-size: 12px;
  //   left: 103%;
  //   top: 50%;
  //   transform: translateY(-50%);
  //   .icon-sanjiaoxingzuo {
  //     position: absolute;
  //     left: -11px;
  //     color: #fff;
  //     font-size: 12px;
  //     top: 50%;
  //     transform: translateY(-50%);
  //   }
  //   &:hover {
  //     i {
  //       display: block;
  //       position: absolute;
  //       left: 0;
  //       font-size: 16px;
  //       top: 0;
  //       text-align: center;
  //       line-height: 25px;
  //       width: 100%;
  //       color: #fff;
  //       height: 100%;
  //       z-index: 10;
  //       background: rgba(0, 0, 0, 0.5);
  //     }
  //     .icon-sanjiaoxingzuo {
  //       color: rgba(0, 0, 0, 0.5);
  //     }
  //   }

  //   i {
  //     display: none;
  //   }
  // }

  /* 按钮集合 */
  .buttons {
    height: 5%;
    border-bottom: 1px solid #ebedf0;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    align-items: center;
    padding: 15px;
    float: right;
    /* 下拉 */
    .frop {
      padding-right: 15px;
      .el-button.el-button--primary.el-dropdown-selfdefine {
        background: #fff;
        color: #000;
        border: 1px solid #dcdee0;
      }
    }
    .el-button {
      font-size: 14px;
      padding: 0 16px;
      height: 30px;
      &.el-button--primary {
        background: #155bd4;
      }
      &.el-button--danger {
        background: red;
      }
    }
  }

  /* 操作主体 */
  .operation {
    width: 100%;
    height: 92%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background: #f4f4f4;
  }

  /* 手机 */
  .phone {
    width: 55%;
    height: 100%;
    overflow-y: scroll;
    display: flex;
    justify-content: center;
    background: #f4f4f4;
    &::-webkit-scrollbar {
      width: 1px;
    }
    // &::-webkit-scrollbar-thumb {
    //   background-color: #155bd4;
    // }

    /* 手机样式 */
    .phoneAll {
      width: 375px;
      min-height: 760px;
      box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1);
      margin: 45px 0;
      position: relative;

      /* 手机高度 */
      .phoneSize {
        position: absolute;
        left: -137px;
        top: 640px;
        font-size: 12px;
        color: #a2a2a2;
        border-bottom: 1px solid #dedede;
        width: 130px;
        height: 21px;
        line-height: 21px;
      }

      /* 头部 */
      .headerTop {
        height: 35px;
        width: 100%;
        background: #fff;
        display: flex;
        padding: 0 5px;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        border-bottom: 1px solid #f7f8fa;
        position: relative;
        box-sizing: border-box;
        /* 左边 */
        .lef {
          position: absolute;
          left: 18px;
          top: 50%;
          transform: translateY(-50%);
          /* 图标 */
          span {
            color: #000;
            font-weight: 400;
            font-size: 12px;
          }
        }
        .header-title {
          width: 100%;
          text-align: center;
          font-size: 14px;
          line-height: 35px;
          color: #333333;
        }
        /* 右边 */
        .rig {
          // display: flex;
          // align-items: center;
          // height: 100%;
          position: absolute;
          right: 18px;
          top: 50%;
          transform: translateY(-50%);
          /* 搜索图标 */
          i {
            font-size: 18px;
            margin: 0 7px 5px;
          }

          /* 文字 */
          span {
            margin: 0 7px;
            font-size: 12px;
          }
        }
      }

      /* 状态栏 */
      .statusBar {
        width: 100%;
        display: block;
      }

      /* 主体内容 */
      .phone-container {
        min-height: 603px;
        box-sizing: border-box;
        cursor: pointer;
        width: 100%;
        position: relative;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        .componentsClass {
          border: 1px solid #f4f4f4;
          &:hover {
            border: 1px dashed #00a0e9;
          }
        }
      }
    }
  }

  /* 右侧工具栏 */
  .decorateAll {
    width: 376px;
    // height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    position: relative;
    padding: 0 12px;
    background: #fff;
    &::-webkit-scrollbar {
      width: 4px;
    }
    &::-webkit-scrollbar-thumb {
      background-color: #00a0e9;
    }
  }

  /* 页面设置tab */
  .decorateTab {
    position: fixed;
    display: flex;
    right: 427px;
    top: 170px;
    flex-direction: column;
    span {
      background-color: #fff;
      box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
      border-radius: 2px;
      width: 94px;
      height: 32px;
      display: inline-block;
      text-align: center;
      line-height: 32px;
      margin-bottom: 12px;
      transition: all 0.8s;
      cursor: pointer;
      &.active {
        background-color: #155bd4;
        color: #fff;
      }
      /* 图标 */
      i {
        font-size: 12px;
        margin-right: 5px;
      }
    }
  }
}

input[type='text']{
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}

/* 动画 */
.decorateAnima-enter-active {
  transition: all 1.5s ease;
}
.decorateAnima-leave-active {
  transition: all 1.5s ease;
}
.decorateAnima-enter {
  transform: translate(8px, 8px);
  opacity: 0;
}
.decorateAnima-leave-to {
  transform: translate(8px, 8px);
  opacity: 0;
}
</style>
